<#include "../template/template_listPage.ftl">
<@header title="地区查询">
<style type="text/css">

</style>
<script type="text/javascript">
    $(document).ready(function () {
        $('#province').change(function () {
            var proviceCode = $('#province').val();
            loadArea(proviceCode, 'areaCity', '2', true);
        });
        $('#areaCity').change(function () {
            var areaCityCode = $('#areaCity').val();
            loadArea(areaCityCode, 'city', '3', true);
        });

        loadArea('', 'province', '1', true);
    });
    /**
     *
     * @param parentCode 父代码
     * @param id
     * @param grade 1为省份
     * @param isTip
     */
    function loadArea(parentCode, id, grade, isTip) {
        if (parentCode == undefined) {
            parentCode = '';
        }
        if (grade == undefined) {
            grade = '';
        }
        if (parentCode == '' && grade == '') {
            return;
        }
        $.ajax({
            type:"POST",
            url:"${web_base}/recharge/area!loadArea.htm",
            async:false,
            data:"parentCode=" + parentCode + '&grade=' + grade,
            success:function (data) {
                if (data != undefined && data != null && data != '') {
                    var dataObj = eval('(' + data + ')');
                    var html = '';
                    if (isTip) {
                        html = '<option value="" selected="selected">--请选择--</option>';
                    }
                    $.each(dataObj, function (i, n) {
                        html = html + '<option value="' + n.code + '">' + n.areaName + '</option>';
                    });
                    $('#' + id).html(html);
                }
            }
        });
    }
</script>
<SCRIPT type="text/javascript">
    //加载方法二
    <!--
    var setting = {
        check:{
            enable:true
        },
        data:{
            simpleData:{
                enable:true
            }
        },
        callback:{
            onNodeCreated:onNodeCreated,
            onCheck:ShowCheckNode
        }
    };

    var dataMaker = function (count) {
        var nodes = [];
        $.ajax({
            type:"POST",
            async:false,
            url:"${web_base}/recharge/area!loadAllDataZTree.htm",
            data:"",
            success:function (msg) {
                var data = eval("(" + msg + ")");
                nodes = data;
            }
        });
        nodes.push({ id:"000000", pId:-1, name:"全国", isParent:true});
        return nodes;
    }
    var showNodeCount = 0;
    function onNodeCreated(event, treeId, treeNode) {
        showNodeCount++;
    }
    function ShowCheckNode(event, treeId, treeNode) {
//        alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked+","+treeNode.level);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getCheckedNodes(true);
        var purview = "";
        for (var i = 0; i < nodes.length; i++) {
            if (!nodes[i].getCheckStatus().half) {
                if (nodes[i].level == 0) {
                    purview = nodes[i].id;
                    break;
                } else if (nodes[i].level > 0) {
                    var parentNode = nodes[i].getParentNode();
                    if (parentNode.checked && !parentNode.getCheckStatus().half) {
                        delete nodes[i];
                        continue;
                    }
                }
            }
        }
        if (purview == "") {
            for (var i in nodes) {
                if (nodes[i] != undefined && !nodes[i].getCheckStatus().half) {
                    purview += nodes[i].id + ",";
                }
            }
        }
        alert(purview);
    }
    function createTree() {
        var zNodes = dataMaker(1);
        showNodeCount = 0;
        $("#treeDemo").empty();
        setting.check.enable = true;
        var time1 = new Date();
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        var time2 = new Date();

//        alert("节点共 " + zNodes.length + " 个, 初始化生成 DOM 的节点共 " + showNodeCount + " 个"
//                + "\n\n 初始化 zTree 共耗时: " + (time2.getTime() - time1.getTime()) + " ms");
    }

    function checkboxChecked() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getNodes();
        treeObj.checkNode(nodes[0], true, true);
        for (var i = 0, l = nodes.length; i < l; i++) {
//            treeObj.checkNode(nodes[i], true, true);
        }
        var node = treeObj.getNodeByParam("id", "", null);

    }
    $(document).ready(function () {
        createTree();
        checkboxChecked();
    });
    //-->
</SCRIPT>
</@header>
<body class="list">
<div class="body">
    <div class="listBar">
        <h1><span class="icon">&nbsp;</span>您当前的位置&nbsp;<span class="pageInfo">[地区维护,展示]</span></h1>
    </div>
    <div style="text-align: center;margin-top: 20px;">
        <span>省份:</span><select id="province" onchange=""></select><span>地区:</span><select
            id="areaCity">
        <option value="">--请选择--</option>
    </select><span>城市:</span><select id="city">
        <option value="">--请选择--</option>
    </select>
        <button type="button" onclick="loadArea('','province','',true);">测试</button>
    </div>

    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div id="log"></div>
    <div>
        <button type="button" onclick="ShowCheckNode();">确定</button>
    </div>

    <div id="test"><span>测试jTemplates</span>
        <script type="text/javascript">
            $(document).ready(function () {

            });
        </script>
        <!-- 模板内容 -->
        <textarea id="template" style="display:none">
            <strong>{$T.name} : {$T.list_id}</strong>
            <table>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>邮箱</th>
                </tr>
                {#foreach $T.table as record}
                <tr>
                    <td>{$T.record.id}</td>
                    <td>{$T.record.name}</td>
                    <td>{$T.record.age}</td>
                    <td>{$T.record.mail}</td>
                </tr>
                {#/for}
            </table>
        </textarea>
        <!-- 输出元素 -->
        <div id="result1" style="display: none;"></div>
    </div>

    <script type="text/template" id="jTemplatesTest">
        <table class="listTable">
            <tr>
                <th><span class="sort">序号</span></th>
                <th><span class="sort">区域代码</span></th>
                <th><span class="sort">区域名</span></th>
                <th><span class="sort">父级代码</span></th>
                <th><span class="sort">类别（1省，2市，3区）</span></th>
                <th><span class="sort">排序</span></th>
                <th><span class="sort">创建时间</span></th>
                <th><span class="sort">更新时间</span></th>
                <th><span class="sort">更新操作人</span></th>
            </tr>
            {#foreach $T.list as obj}
            <tr>
                <td>{$T.obj$index+$T.pageSize*($T.currentPage-1)+1}</td>
                <td>{$T.obj.code}</td>
                <td>{$T.obj.areaName}</td>
                <td>{$T.obj.parentCode}</td>
                <td>{$T.obj.grade}</td>
                <td>{$T.obj.sort}</td>
                <td>{$T.obj.createTime}</td>
                <td>{$T.obj.updateTime}</td>
                <td>{$T.obj.updateOperator}</td>
            </tr>
            {#/for}
        </table>

    </script>
    <br><br>
<@pageAjax url="${web_base}/recharge/area!ajaxShow.htm" query="areaQuery" isNoDataShowPage=true templateId="jTemplatesTest" rowList="areaName=区域名,code=区域码">
    <div class="operateBar" style="margin-left: 30px;">
        查询级别:<select name="grade" id="">
        <option value="">--</option>
        <option value="1">省</option>
        <option value="2">市</option>
        <option value="3">县</option>
        <option value="8">空值</option>
    </select>
        <button type="button" onclick="resetPageData_pageAjaxForm();">查询</button>
    </div>
</@pageAjax>
    <div></div>
</div>

</body>
</html>